<template>
  <a-layout-header>
    <div class="logo"/>
    <div class="header-right">
      <a-menu
          v-model:selectedKeys="menu.selectKey"
          theme="dark"
          mode="horizontal"
          :style="{ lineHeight: '64px' ,flex:'auto'}"
          @select="handleMenuChange"
      >
        <a-menu-item key="1">自助提交</a-menu-item>
        <a-menu-item key="2">批量上传</a-menu-item>
      </a-menu>
      <div class="setting-icon" @click="showDrawer">
        <SettingOutlined :style="{color: '#fff'}"/>
      </div>
    </div>
  </a-layout-header>

  <a-drawer
      title="基础配置"
      :width="720"
      :open="open"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
      @close="onClose"
  >
    <a-form ref="formRef" :model="settingStore.setting" :rules="rules" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="提交接口" name="api_url">
            <a-input v-model:value="settingStore.setting.api_url" placeholder="输入接口链接"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="来源 K 参数" name="k">
            <a-input v-model:value="settingStore.setting.k" placeholder="输入来源 K 参数"/>
          </a-form-item>
        </a-col>


        <a-col :span="12">
          <a-form-item label="需要录音" name="need_audio">
            <a-switch v-model:checked="settingStore.setting.need_audio"/>
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="模板表头" name="headers">
            <a-select
                v-model:value="settingStore.setting.headers"
                mode="tags"
                style="width: 100%"
                placeholder="选择表头"
            ></a-select>
          </a-form-item>
          <a-space direction="horizontal">
            <a-form-item label="日期字段" name="date_field">
              <a-select
                  v-model:value="settingStore.setting.date_field"
                  :options="headerOptions"
                  style="width: 100%"
                  placeholder="选择日期字段"
              ></a-select>
            </a-form-item>
            <a-form-item label="号码字段" name="phone_field">
              <a-select
                  v-model:value="settingStore.setting.phone_field"
                  :options="headerOptions"
                  style="width: 100%"
                  placeholder="选择号码字段"
              ></a-select>
            </a-form-item>
            <a-form-item label="名称字段" name="name_field">
              <a-select
                  v-model:value="settingStore.setting.name_field"
                  :options="headerOptions"
                  style="width: 100%"
                  placeholder="选择名称字段"
              ></a-select>
            </a-form-item>
            <a-form-item label="名称字段" name="name_field">
              <a-select
                  v-model:value="settingStore.setting.name_field"
                  :options="headerOptions"
                  style="width: 100%"
                  placeholder="选择名称字段"
              ></a-select>
            </a-form-item>
            <a-form-item label="备注字段" name="remark_field">
              <a-select
                  v-model:value="settingStore.setting.remark_field"
                  :options="headerOptions"
                  style="width: 100%"
                  placeholder="选择备注字段"
              ></a-select>
            </a-form-item>
            <a-form-item label="所在位置字段" name="address_field">
              <a-select
                  v-model:value="settingStore.setting.address_field"
                  :options="headerOptions"
                  style="width: 100%"
                  placeholder="选择所在位置字段"
              ></a-select>
            </a-form-item>

          </a-space>
        </a-col>

      </a-row>
    </a-form>
    <template #extra>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onSave">保存</a-button>
      </a-space>
    </template>
  </a-drawer>

</template>

<script setup lang="ts">
import {useMenuStore} from '@/stores/menu'
import {SettingOutlined} from '@ant-design/icons-vue';
import type {Rule} from 'ant-design-vue/es/form';
import {computed, ref} from "vue";
import {useSettingStore} from "@/stores/setting";
import {message} from "ant-design-vue";

const settingStore = useSettingStore();
const menu = useMenuStore();
const open = ref<boolean>(false);

const formRef = ref();

const rules: Record<string, Rule[]> = {
  api_url: [{required: true, message: '请输入API 接口'}],
  k: [{required: true, message: '请输入 K 参数'}],
};
const headerOptions = computed(() => {
  return settingStore.setting.headers.map((item: any) => {
    return {label: item, value: item}
  })
})
const showDrawer = () => {
  open.value = true;
};

const onClose = () => {
  open.value = false;
};
const onSave = () => {
  message.success("保存成功");
  settingStore.saveSetting();
  open.value = false;
}
const handleMenuChange = (val: any) => {
  menu.setMenuCache();
  console.log("val", val.selectedKeys);
}
</script>

<style scoped lang="less">
.logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  .setting-icon {
    flex: none;
    cursor: pointer;
  }
}

</style>
